<template>
  <div class="maxBox">
    <!-- 选择部分-->
    <div class="selectBox">
      <div class="title">
        <div class="wellSelect">
          <!--        <span>数据配置&nbsp;&nbsp;</span>-->
          <!--    选择井下拉框-->
          <el-form :rules="rules" inline:trim="true">
            <el-form-item label="Bowers法数据配置" prop="well_id">
              <!--下拉框选择项目-->
              <div class="select-wrapper">
                <el-select v-model="project_id" @change="getWellInfoListById(project_id)" placeholder="请选择项目">
                  <el-option
                      v-for="item in projectList"
                      :key="item.id"
                      :label="item.project_name"
                      :value="item.id"
                  />
                </el-select>
                <el-select v-model="well_id" placeholder="请选择井名称" @change="initEcharts()">
                  <el-option
                      v-for="item in wellList"
                      :key="item.id"
                      :label="item.well_name"
                      :value="item.id"
                  />
                </el-select>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!--      输入参数-->
      <div class="content">
        <div class="ppBox">
          <el-form :model="wellParams" ref="eatonFormRef" :rules="wellParamsRules" label-width="80px" class="demo-ruleForm">
            <el-form-item label="V0" prop="V0">
              <el-input placeholder="请输入V0" v-model="wellParams.v0">
                <template slot="suffix">
                  <el-tooltip
                      content="速度截距"
                      placement="top"
                  >
                    <i class="el-icon-question" style="cursor: pointer; color: #999;"></i>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="A" prop="A">
              <el-input placeholder="请输入A" v-model="wellParams.a">
                <template slot="suffix">
                  <el-tooltip
                      content="缩放系数"
                      placement="top"
                  >
                    <i class="el-icon-question" style="cursor: pointer; color: #999;"></i>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="B" prop="B">
              <el-input placeholder="请输入B" v-model="wellParams.b">
                <template slot="suffix">
                  <el-tooltip
                      content="指数系数"
                      placement="top"
                  >
                    <i class="el-icon-question" style="cursor: pointer; color: #999;"></i>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <div class="button-group">
                <el-button type="primary" @click="calculateKxyl">数据归一化处理</el-button>
                <el-button type="primary" @click="calculateKxyl1">压力监测</el-button>
                <el-button type="primary" @click="predictPressure">压力预测</el-button>
                <el-button type="primary" @click="exportExcel">导出Excel</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="pfBox">
          <el-form :model="params" ref="eatonFormRef" label-width="80px" :rules="rules" class="demo-ruleForm">
            <el-form-item label="Vp" prop="Vp">
              <el-input placeholder="请输入Vp" v-model="params.Vp">
                <template slot="suffix">
                  <el-tooltip
                      content="纵波速度（m/s）"
                      placement="top"
                  >
                    <i class="el-icon-question" style="cursor: pointer; color: #999;"></i>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="Vs" prop="Vs">
              <el-input placeholder="请输入Vs" v-model="params.Vs">
                <template slot="suffix">
                  <el-tooltip
                      content="横波速度（m/s）"
                      placement="top"
                  >
                    <i class="el-icon-question" style="cursor: pointer; color: #999;"></i>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="pcBox">
          <el-form :model="params" ref="eatonFormRef" :rules="rules" label-width="80px" class="demo-ruleForm">
            <el-form-item label="h_rect" prop="h_rect">
              <el-input placeholder="请输入h_rect" v-model="params.h_rect">
                <template slot="suffix">
                  <el-tooltip
                      content="构造最小水平主应力附加项"
                      placement="top"
                  >
                    <i class="el-icon-question" style="cursor: pointer; color: #999;"></i>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="H_rect" prop="H_rect">
              <el-input placeholder="请输入H_rect" v-model="params.H_rect">
                <template slot="suffix">
                  <el-tooltip
                      content="构造最大水平主应力附加项"
                      placement="top"
                  >
                    <i class="el-icon-question" style="cursor: pointer; color: #999;"></i>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="pcBox1">
          <el-form :model="params" ref="eatonFormRef" :rules="rules" label-width="80px" class="demo-ruleForm">
            <el-form-item label="UCS" prop="UCS">
              <el-input placeholder="请输入UCS" v-model="params.UCS">
                <template slot="suffix">
                  <el-tooltip
                      content="岩石强度"
                      placement="top"
                  >
                    <i class="el-icon-question" style="cursor: pointer; color: #999;"></i>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="θ" prop="o">
              <el-input placeholder="请输入θ" v-model="params.o">
                <template slot="suffix">
                  <el-tooltip
                      content="内摩擦角"
                      placement="top"
                  >
                    <i class="el-icon-question" style="cursor: pointer; color: #999;"></i>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!--    显示的echart图区域-->
    <div v-if="isShowEchart" class="echartBox">
      <KxylEchartsBowers ref="KxylEchartsRef"/>
    </div>
    <!--显示预处理数据的区域-->
    <div v-if="isShowPreDataEchart" class="preDataEchartBox">
      <PreDataKxylEcharts ref="PreDataKxylEchartsRef"/>
    </div>
    <!--    显示预测压力的区域-->
    <div v-if="isShowPreEchart" class="preEchartBox">
      <PreKxylEchartsBowers ref="PreKxylEchartsRef"/>
    </div>
    <el-dialog
        title="选择邻井"
        :visible.sync="dialogVisible"
        width="30%">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="demo-ruleForm">
        <el-form-item label="请选择邻井" prop="wellName">
          <el-select v-model="form.well_idAdj" placeholder="请选择井名称">
            <el-option
                v-for="item in wellListAdj"
                :key="item.id"
                :label="item.well_name"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmAdjacentWell">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import KxylEchartsBowers from "@/views/KxylBowers/KxylEchartsBowers.vue";
import PreDataKxylEcharts from "@/views/KxylEaton/PreDataKxylEcharts.vue";
import PreKxylEchartsBowers from "@/views/KxylBowers/PreKxylEchartsBowers.vue";
import api from "@/api/api";

export default {
  components: {
    KxylEchartsBowers,
    PreDataKxylEcharts,
    PreKxylEchartsBowers
  },
  data() {
    return {
      dialogVisible: false,
      isShowPreDataEchart: false,
      isShowEchart: true,
      isShowPreEchart: false,
      project_id: '',
      projectList: [],
      well_id: '',
      wellList: [],
      wellListAdj: [],//储存邻井数据
      wellParams: {
        v0: '',
        a: '',
        b: '',
      },
      params: {
        Vp: '',
        Vs: '',
        h_rect: '',
        H_rect: '',
        UCS: '',
        o: '',
      },
      form: {
        well_idAdj: '',
      },
      rules: {
        well_idAdj: [{required: true, message: '请选择邻井', trigger: 'blur'}],
        well_id: [{required: true, message: '请选择井名称', trigger: 'blur'}],
        Vp: [{required: true, message: '请输入Vp', trigger: 'blur'}],
        Vs: [{required: true, message: '请输入Vs', trigger: 'blur'}],
        UCS: [{required: true, message: '请输入UCS', trigger: 'blur'}],
        o: [{required: true, message: '请输入θ', trigger: 'blur'}],
      },
      wellParamsRules: {
        V0: [{required: true, message: '请输入V0', trigger: 'blur'}],
        A: [{required: true, message: '请输入A', trigger: 'blur'}],
        B: [{required: true, message: '请输入B', trigger: 'blur'}],
      }
    }
  }
  , methods: {
    //数据预处理
    calculateKxyl() {
      this.$refs.eatonFormRef.validate((valid) => {
        if (valid) {
          // 显示预处理数据的区域
          this.isShowPreDataEchart = true;
          this.isShowEchart = false;
          this.isShowPreEchart = false;
          // 表单验证通过，执行计算
          //把输入的参数传给子组件并发请求
          if (this.params.h_rect == "") {
            this.params.h_rect = 0;
          }
          if (this.params.H_rect == "") {
            this.params.H_rect = 0;
          }
          this.$nextTick(() => {
            if (this.$refs.PreDataKxylEchartsRef) {
              this.$refs.PreDataKxylEchartsRef.map = this.params;
              this.$refs.PreDataKxylEchartsRef.map.well_id = this.well_id;
              console.log("父亲这边的数据", this.params)
              this.$refs.PreDataKxylEchartsRef.initialize();
              //不显示图表区域
              console.log('表单验证通过');
            }
          })
        } else {
          // 表单验证不通过，提示用户输入正确信息
          console.log('表单验证不通过');
        }
      });

    },
    //压力监测
    calculateKxyl1() {
      this.$refs.eatonFormRef.validate((valid) => {
        if (valid) {
          this.isShowPreDataEchart = false;
          this.isShowPreEchart = false;
          this.isShowEchart = true;
          // 表单验证通过，执行计算
          //把输入的参数传给子组件并发请求
          if (this.params.h_rect == "") {
            this.params.h_rect = 0;
          }
          if (this.params.H_rect == "") {
            this.params.H_rect = 0;
          }
          this.$nextTick(() => {
            if (this.$refs.KxylEchartsRef) {
              this.$refs.KxylEchartsRef.map = this.params;
              this.$refs.KxylEchartsRef.map.v0 = this.wellParams.v0;
              this.$refs.KxylEchartsRef.map.a = this.wellParams.a;
              this.$refs.KxylEchartsRef.map.b = this.wellParams.b;
              this.$refs.KxylEchartsRef.map.well_id = this.well_id;
              console.log("父亲这边的数据", this.params)
              this.$refs.KxylEchartsRef.initialize();
              console.log('表单验证通过');
            }
          })
        } else {
          // 表单验证不通过，提示用户输入正确信息
          console.log('表单验证不通过');
        }
      });

    },
    //获取所有的项目
    getProjectList() {
      const map = {
        currentPage: 0,
        keyword: "",
      }
      api.post("/project/getProjectList", map).then(res => {
        this.projectList = res.data.projectList;
        console.log("所有的项目:", res.data.projectList);
      })
    },
    //项目下拉框改变事件
    getWellInfoListById(project_id) {
      //每次选择都先清空
      this.wellList = [];
      this.well_id = '';
      //根据项目id，赋值项目里面的参数属性
      this.params.n = this.projectList.find(item => item.id === project_id).n;
      this.params.Vp = this.projectList.find(item => item.id === project_id).vp;
      this.params.Vs = this.projectList.find(item => item.id === project_id).vs;
      this.params.UCS = this.projectList.find(item => item.id === project_id).ucs;
      this.params.o = this.projectList.find(item => item.id === project_id).o;
      if (!project_id) {
        this.wellList = [];
        this.well_id = '';
        return;
      }
      const map = {
        project_id: project_id,
      }
      api.post("/project/getWellListByProjectId", map).then(res => {
        this.wellList = res.data.wellInfoList;
        console.log(res);
      })
    },
    //井下拉框改变事件
    initEcharts() {
      //初始化图表，显示原有的参数（obg,nhg,dc）
      this.$refs.eatonFormRef.validate((valid) => {
        if (valid) {
          //根据wellId获取井的信息，并填入输入框
          if (this.well_id) {
            const map = {
              well_id: this.well_id,
            }
            api.post("/wellInfo/getWellInfoDetail", map).then(res => {
              if (res.data.code === 0) {
                this.wellParams = res.data.wellInfoDetail
              }
            })
          }
        } else {
          // 表单验证不通过，提示用户输入正确信息
          console.log('表单验证不通过');
        }
      });
    },
    //预测压力
    predictPressure() {
      this.$refs.eatonFormRef.validate((valid) => {
        if (valid) {
          //把井的数据传过去，显示wellList除去当前选择的井
          this.wellListAdj = this.wellList.filter(item => item.id !== this.well_id);
          // 清空之前选择的邻井
          this.form.well_idAdj = '';
          //显示弹窗
          this.dialogVisible = true;
        } else {
          // 表单验证不通过，提示用户输入正确信息
          console.log('表单验证不通过');
        }
      });
    },
    // 确认邻井选择
    confirmAdjacentWell() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 处理邻井选择后的逻辑
          console.log('选择的邻井ID:', this.form.well_idAdj);
          // 在这里添加你的处理逻辑
          // 显示预处理数据的区域
          this.isShowPreEchart = true;
          this.isShowEchart = false;
          this.isShowPreDataEchart = false;
          // 表单验证通过，执行计算
          //把输入的参数传给子组件并发请求
          if (this.params.h_rect == "") {
            this.params.h_rect = 0;
          }
          if (this.params.H_rect == "") {
            this.params.H_rect = 0;
          }
          this.$nextTick(() => {
            if (this.$refs.PreKxylEchartsRef) {
              this.$refs.PreKxylEchartsRef.map = this.params;
              this.$refs.PreKxylEchartsRef.map.v0 = this.wellParams.v0;
              this.$refs.PreKxylEchartsRef.map.a = this.wellParams.a;
              this.$refs.PreKxylEchartsRef.map.b = this.wellParams.b;
              this.$refs.PreKxylEchartsRef.map.well_id = this.well_id;
              console.log("父亲这边的数据", this.params)
              this.$refs.PreKxylEchartsRef.initialize1();
              //不显示图表区域
              console.log('表单验证通过');
            }
          })
          // 关闭弹窗
          this.dialogVisible = false;
        } else {
          console.log('表单验证不通过');
        }
      });
    },
    //导出excel
    exportExcel() {
      //先验证
      this.$refs.eatonFormRef.validate((valid) => {
        if (valid) {
          //导出excel
          api({
            url: "/export/exportFileBowers",
            method: "post",
            responseType: "blob",
            params: {
              well_id: this.well_id,
            }
          }).then(res => {
            console.log(res);
            // 下载文件
            const blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'Bowers法压力数据表.xlsx';
            a.click();
            window.URL.revokeObjectURL(url);
          }).catch(err => {
            console.log(err);
            this.$message.error("导出失败");
          })
        } else {
          console.log('表单验证不通过');
        }
      })
    },
  },
  created() {
    this.getProjectList();
  }
}
</script>

<style scoped>
.maxBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.title {
  margin-top: -15px;
  margin-left: 20px;
  display: flex;
}

.content {
  display: flex;
  justify-content: center;
  flex: 1;
}

.selectBox {
  padding-top: 30px;
  padding-left: 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
  padding-bottom: 56px;
}

.echartBox {
  width: 100%;
  flex: 1; /* 或使用flex: 1;来占据剩余空间 */
  margin-top: 0;
}

.preEchartBox {
  width: 100%;
  flex: 1;/* 或使用flex: 1;来占据剩余空间 */
  margin-top: 0;
}

.preDataEchartBox {
  width: 100%;
  flex: 1;/* 或使用flex: 1;来占据剩余空间 */
  margin-top: 0;
}

.ppBox {
  width: 320px;
  height: 200px;
  margin-top: -72px;
}

.pfBox {
  width: 320px;
  height: 200px;
  margin-top: -53px;
  padding-left: -80px;
  margin-left: -100px;
}

.pcBox {
  width: 320px;
  height: 200px;
  margin-top: -53px;
  padding-left: -80px;
  margin-left: -100px;
}

.pcBox1 {
  width: 320px;
  height: 200px;
  margin-top: -53px;
  padding-left: -80px;
  margin-left: -100px;
}

.select-wrapper {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px; /* 控制两个下拉框之间的间距 */
}

.button-group {
  display: flex;
  gap: 10px; /* 控制按钮之间的间距 */
}
</style>
